[docs-infra] Add Benchmarking Pages to Docs#713
Conversation
…lockquoteCallouts plugins
✅ Deploy Preview for mui-internal ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
github-actions
Bot
added
the
PR: out-of-date
oliviertassinari
temporarily deployed
to
davis/add-docs-benchmarking - mui-tools-public PR #713
Render
Destroyed
github-actions
Bot
removed
the
PR: out-of-date
Janpot
left a comment
Janpot
left a comment
There was a problem hiding this comment.
What would be interesting is to be able to compare all the different methods of highlighting so that we can prove the right choices were made in terms of architecture.
Also not sure I understand why we can't just use the devtools performance tab. Creating this little web vitals checker around the benchmark page doesn't seem to really add value, it's just more code to maintain.
oliviertassinari
temporarily deployed
to
davis/add-docs-benchmarking - mui-tools-public PR #713
Render
Destroyed
oliviertassinari
temporarily deployed
to
davis/add-docs-benchmarking - code-infra-dashboard PR #713
Render
Destroyed
oliviertassinari
temporarily deployed
to
davis/add-docs-benchmarking - mui-tools-public PR #713
Render
Destroyed
oliviertassinari
temporarily deployed
to
davis/add-docs-benchmarking - code-infra-dashboard PR #713
Render
Destroyed
oliviertassinari
temporarily deployed
to
davis/add-docs-benchmarking - code-infra-dashboard PR #713
Render
Destroyed
|
Merging this as it documents how to serve demos through iframes and read basic performance metrics. We can iterate on this further to bring more benchmarks, custom performance markets, comparisons between different benchmarks, averaging runs, Google Analytics RUM, etc |
4 participants
Important
For the most accurate benchmarks, you should use a production build in incognito mode
Add a benchmarking page at /docs-infra/components/code-highlighter/bench
This page shows the code needed to reproduce the benchmark and a button that opens the bench dialog
Demo code can be opened in a dialog. The demo page is loaded into an iframe which reports web vitals like First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Interaction to Next Paint (INP), Time to Interactive (TTI), Total Blocking Time (TBT). Long tasks considered blocking (longer than 50ms) are also logged. After the 5 seconds needed to calculate TTI, the user can interact with the benchmark frame. This is helpful to see if any long tasks are reported.
The benchmark can be opened directly for more advanced profiling at /bench/docs-infra/components/code-highlighter/demos/code